<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优菜商城</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="author" content="@binggan" />
		<link rel="stylesheet" href="css/ydui.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_463779_pkv3jpw5yz1fko6r.css" />
		<link rel="stylesheet" type="text/css" href="multipicker/MultiPicker.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/flexible.js"></script>
	</head>

	<body>
		<section class="g-flexview">
			<header class="m-navbar index-navbar border-bot">
				<a href="#" class="navbar-item back">
					<i class="back-ico"></i>
				</a>
				<div class="navbar-center">
					<span class="navbar-title">编辑收货地址</span>
				</div>
			</header>
			<div class="g-scrollview">

				<div class="address-box">
					<div class="address-item border-bot">
						<label for="username">收货人：</label>
						<div class="add-item-right">
							<input type="text" id="username" placeholder="请输入收货人的姓名" />
						</div>
					</div>

					<div class="address-item border-bot">
						<label for="userphone">联系电话：</label>
						<div class="add-item-right">
							<input type="text" id="userphone" placeholder="请输入收货人手机号码" />
						</div>
					</div>
				</div>
				<p class="area-tips">暂时只配送洪山区</p>
				<div class="address-box">
					<div class="address-item border-bot">
						<label for="addr-chose">收货地址：</label>
						<div class="add-item-right">
							<input type="text" id="addr-chose" placeholder="点击选择收货区域" disabled="disabled" />
						</div>
						<i class="iconfont icon-arrow-right txt-grey"></i>
					</div>

					<div class="address-item border-bot">
						<label for="detail-addr">详细地址：</label>
						<div class="add-item-right">
							<textarea name="" id="detail-addr" rows="4" placeholder="请在此处输入楼号/楼层/房号+店铺名"></textarea>
						</div>
					</div>
				</div>
				<div class="m-cell defalut-add">
					<label class="cell-item">
				        <span class="cell-left">设为默认地址</span>
				        <label class="cell-right">
				            <input type="checkbox" name="checkbox"/>
				            <i class="cell-checkbox-icon"></i>
				        </label>
					</label>
				</div>

				<div class="button-group">
					<button type="button" class="button-big button-yellow save-address">保存</button>
					<button type="button" class="button-big button-grey cancel-edit">删除</button>
				</div>

				<!--地址选择器容器-->
				<div id="pickerContainer"></div>
			</div>
		</section>
		<script src="js/jquery.min.js"></script>
		<script src="js/ydui.js"></script>
		<script src="multipicker/MultiPicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="multipicker/city.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/myvalidate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*地区选择器*/
			new MultiPicker({
				input: 'addr-chose',
				container: 'pickerContainer',
				jsonData: $city,
				success: function(res) {
					console.log(res);
					var value = "",
						id = "";
					$.each(res, function(idx, obj) {
						value += obj.value;
						id += obj.id;
					});
					$("#addr-chose").val(value);
					console.log(id);
				}
			})

			/*信息提交*/
			var saveBtn = $(".save-address"),
				cancelBtn = $(".cancel-edit");
			saveBtn.on('click', function() {
				var testUsername = myValidate.init($("#username"), '请输入姓名'),
					testPhone = myValidate.phone($("#userphone"), '请输入准确的手机号码'),
					testAddr = myValidate.init($("#addr-chose"), '请选择收货地址'),
					testArea = myValidate.init($("#detail-addr"), '请输入详细地址');
					
				if(testUsername && testPhone && testAddr && testArea) {
					alert("a");
				}
			});
			//删除地址
			cancelBtn.on('click',function(){ 
				YDUI.dialog.confirm('删除地址提示',  '请确实是否删除该地址！',  function () {
				    // 确定删除地址
				   $.ajax({
				   	
				   });
				});
			});
		</script>
	</body>

</html>